.background {
    width: 230px;
    height: 230px;
    position: absolute;
    z-index: -3;
    top: 1px;
    left: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bgblack {
    width: 230px;
    height: 230px;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: -2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lens {
    width: 230px;
    height: 230px;
    position: absolute;
    z-index: -2;
    top: 5px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.centre {
    height: 20px;
    width: 20px;
    top: 105px;
    left: 106px;
    align-items: center;
}

.second {
    height: 85px;
    width: 3px;
    top: 125px;
    left: 94.5px;
    border-radius: 10px;
    z-index: 1;
}

.hour {
    height: 50.08px;
    width: 50.08px;
    top: 69px;
    left: 46px;
    z-index: 1;
}

.minute {
    height: 48px;
    width: 80px;
    top: 70px;
    left: 38px;
    z-index: -1;
}

.point {
    height: 10px;
    width: 9px;
}

.point1 {
    position: absolute;
    top: 110px;
    left: 0px;
}

.point2 {
    position: absolute;
    top: 110px;
    left: -200px;
}

.point3 {
    position: absolute;
    top: 7px;
    left: -100px;
}

.point4 {
    position: absolute;
    top: 215px;
    left: -98.5px;
}

@font-face {
    font-family: poppins-regular;
    src: url('/common/poppins/Poppins-Regular.otf');
}

.calendar {
    height: 20px;
    width: 20px;
    top: 155px;
    left: -47px;
    align-items: center;
}

.notification {
    font-size: 6.5px;
    font-family: poppins-regular;
    color: white;
    height: 11px;
    width: 86px;
    top: 180px;
    left: 75px;
    align-items: center;
    flex-direction: column;
    position: absolute;
    text-overflow: ellipsis;
}

.weather {
    height: 10.52px;
    width: 13.46px;
    top: 24.5px;
    left: -70px;
}

.weather_description {
    font-size: 6.5px;
    font-family: poppins-regular;
    color: white;
    width: 23px;
    height: 10px;
    top: 25.5px;
    left: -70px;
    text-overflow: ellipsis;
}

.date {
    position: absolute;
    font-size: 6.5px;
    font-family: poppins-regular;
    color: white;
    width: 57px;
    height: 8px;
    top: 40px;
    left: 92px;
    align-items: center;
    flex-direction: column;
    text-overflow: ellipsis;
}

.container {
    position: absolute;
    height: 45px;
    width: 45px;
    top: 100px;
    left: 40px;
}

.calories_img {
    position: absolute;
    width: 10px;
    height: 17px;
    top: 103px;
    left: 57px;
    align-items: center;
    flex-direction: column;
}

.foots {
    position: absolute;
    width: 17px;
    height: 20px;
    top: 105px;
    left: 169px;
    align-items: center;
    flex-direction: column;
}

.calories {
    position: absolute;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    top: 95px;
    left: -55px;
    align-items: center;
    flex-direction: column;
}

.min_progress_calories {
    width: 45px;
    height: 45px;
    background-color: #454545;
    color: linear-gradient(#ff8c00, #ff4500);
    stroke-width: 5px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.foot_steps {
    position: absolute;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    top: 97px;
    left: 60px;
}

.min_progress_footSteps {
    width: 45px;
    height: 45px;
    background-color: #454545;
    color: linear-gradient(#00ff7f, #0dbab1);
    stroke-width: 5px;
}

#value_container_calories {
    position: absolute;
    font-family: poppins-regular;
    font-size: 6.5px;
    top: 124px;
    left: 54px;
}

#value_container_footSteps {
    position: absolute;
    font-family: poppins-regular;
    font-size: 6.5px;
    top: 125px;
    left: 170px;
}

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}